<div class="mc-layout">
  <div class="chat-container">
    <div class="chat-header" :title="'MateChat'" :logoImg="'https://matechat.gitcode.com/logo.svg'">
      <img src="https://matechat.gitcode.com/logo.svg" />
      <span>MateChat</span>
    </div>
    @if (newPage) {
    <div class="welcom-page">
      <div class="content-wrapper">
        <div class="mc-introduction">
          <div class="mc-introduction-logo-container">
            <img src="https://matechat.gitcode.com/logo2x.svg" alt="MateChat" />
            <div class="mc-introduction-title">MateChat</div>
          </div>
          <!--v-if-->
          <div class="mc-introduction-description">
            <div>MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。</div>
            <div>
              作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat
              做的更好。
            </div>
          </div>
        </div>
        <div class="guess-question">
          <div class="guess-title">
            <div>猜你想问</div>
          </div>
          <div class="guess-content">
            <ng-container *ngFor="let item of questionList">
              <span (click)="onSubmit(item)">{{ item }}</span>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
    } @else {
    <div class="chat-list">
      <ng-container *ngFor="let msg of messages">
        @if (msg.from === 'user') {
        <mc-bubble class="user-bubble" [align]="'right'" [content]="msg.content" [avatarConfig]="avatarConfig"></mc-bubble>
        } @else if (msg.from === 'model') {
        <mc-bubble class="model-bubble" [align]="'left'" [loading]="msg.loading" [avatarConfig]="modelAvatar">
          <mc-markdown-card [theme]="theme" [content]="msg.content" [enableMermaid]="true"></mc-markdown-card>
        </mc-bubble>
        }
      </ng-container>
    </div>
    }
    <div class="chat-footer">
      <mc-input (submit)="onSubmit($event)"> </mc-input>
      <div class="statement-box">
        <span>内容由AI生成，无法确保准确性和完整性，仅供参考</span>
      </div>
    </div>
  </div>
</div>
